import React, { useEffect, useState } from 'react';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { supplierColumns } from '../mconfig';
import { Button, Col, Form, Input, Row, Select, Table } from 'antd';
import { commonPageSizeOptions, showTotalInfo } from '@/common/constVariable';
import '../common/styles.less';
import { ContacterAPI } from '../common/type';
import { supplierDataGridServices } from '../services';
import { getTenantID } from '@/utils';
import { ILoadMapTypeAll } from '@/common';
// import MockManage from '../common/MockManage.json'; //模拟数据-王志龙

export const UpdataTable: React.FC<ContacterAPI.IUpdataTable> = ({
  onSaveSelectRow,
  defaultSupplierKey,
  getContacterInfo,
  curRes,
}) => {
  const preflxCls = 'customer-modal-';

  /** 表单Form */
  const [searchForm] = Form.useForm();

  /** 获取供应商信息 */
  const {
    getSupplierDataGrid,
    supplierDataGridloading,
    supplierPagination,
    supplierDataGrid,
    loadMapInfo,
    mapLoading,
  } = supplierDataGridServices(curRes);

  /** 点击选中 */
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    const selectKey: string = newSelectedRowKeys?.toString();
    const supplierInfo: Record<string, any> = supplierDataGrid?.find((item: any) => item?.id == selectKey);
    // const supplierInfo: Record<string, any> | any = MockManage?.find((item: any) => item?.id == selectKey); //模拟数据-王志龙
    onSaveSelectRow({
      supplierKey: supplierInfo?.id,
      supplierInfo: supplierInfo,
    });
  };

  /** 初始化选择供应商 */
  useEffect(() => {
    if (supplierDataGrid?.length > 0 && getContacterInfo?.supplierID && !defaultSupplierKey) {
      const supplierInfo: Record<string, any> = supplierDataGrid?.find((item: any) => item?.id == getContacterInfo?.supplierID);
      onSaveSelectRow({
        supplierKey: supplierInfo?.id,
        supplierInfo: supplierInfo,
      });
    }
  }, [defaultSupplierKey, supplierDataGrid, getContacterInfo?.supplierID]);

  /***Table-分页方法***/
  const handlePaginationChange = (page: number, pageSize: number) => {
    const params = {
      page: page,
      rows: pageSize,
    };
    getSupplierDataGrid(params);
  };

  return (
    <div className={preflxCls + 'UpdateModalTable'}>
      <Form form={searchForm}>
        <Row gutter={[8, 0]} style={{ padding: '10px 1rem' }}>
          <Col span={4}>
            <Form.Item name="fullName">
              <Input placeholder="企业名称" allowClear />
            </Form.Item>
          </Col>
          {/* <Col span={4}>
            <Form.Item name="shortName">
              <Input placeholder="企业简称" allowClear />
            </Form.Item>
          </Col> */}
          <Col span={4}>
            <Form.Item name="registerType">
              <Select placeholder="企业类型" allowClear loading={mapLoading}>
                {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.COMPANY_TYPE}`]?.map((item: any) => {
                  return (
                    <Select.Option key={item?.id} id={item?.id}>
                      {item?.name}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="supplyType">
              <Select placeholder="供货分类" allowClear loading={mapLoading}>
                {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.CLASSIFICATION_SUPPLY}`]?.map((item: any) => {
                  return (
                    <Select.Option key={item?.id} id={item?.id}>
                      {item?.name}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="state">
              <Select placeholder="认证状态" allowClear loading={mapLoading}>
                {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.SUPPLIER_STATE}`]?.map((item: any) => {
                  return (
                    <Select.Option key={item?.id} id={item?.id}>
                      {item?.name}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={8} style={{ textAlign: 'right' }}>
            <Button
              style={{ margin: '0 7px' }}
              type="primary"
              icon={<SearchOutlined />}
              onClick={() => {
                const searchParams: Record<string, any> = searchForm?.getFieldsValue();
                getSupplierDataGrid(searchParams);
              }}
            >
              查询
            </Button>
            <Button
              icon={<RedoOutlined />}
              onClick={() => {
                searchForm?.resetFields();
                getSupplierDataGrid({});
              }}
            >
              重置
            </Button>
          </Col>
        </Row>
      </Form>
      <div className={'list-table'}>
        <Table
          bordered
          size="small"
          columns={supplierColumns as any}
          dataSource={supplierDataGrid}
          // dataSource={MockManage}
          loading={supplierDataGridloading}
          scroll={{ x: 500, y: 500 }}
          rowKey={(record: any) => record?.id}
          rowSelection={{
            type: 'radio',
            selectedRowKeys: [defaultSupplierKey],
            onChange: onSelectChange,
          }}
          pagination={{
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: commonPageSizeOptions,
            showTotal: showTotalInfo,
            onChange: handlePaginationChange,
            pageSize: supplierPagination?.pageSize,
            current: supplierPagination?.current,
            total: supplierPagination?.total,
          }}
          onRow={(record) => {
            return {
              onClick: () => {
                const supplierInfo: Record<string, any> = supplierDataGrid?.find((item: any) => item?.id == record?.id);
                onSaveSelectRow({
                  supplierKey: supplierInfo?.id,
                  supplierInfo: supplierInfo,
                });
              },
            };
          }}
        />
      </div>
    </div>
  );
};
